<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>容器属性综合应用</title>
		<style type="text/css">
			*{margin:0;padding:0;box-sizing: border-box;}

ul,ol{
  list-style:none;/*将list前面的小圆点去掉*/
}

img{
  max-width: 100%;/*图片最大宽度不能超过这一行*/
}

.logo{
  display: flex;/*想要图片居中，将其父元素LOGO变为flex*/
  align-items:center;/*对齐方式改为居中*/
}

.logo > img{
  height: 32px;/*LOGO里面的img设定高度，高度在对齐的时候比较好计算*/
  vertical-align: top;/*如果图片下面由多余的东西则用该行代码*/
}

.header{
  display: flex;
  /*想要两个元素变成横向排列，flex只需要在父元素添加此行即可*/
  /*header为 ul和LOGO的父元素*/
  background: grey;
}

ul{
  margin-left: auto;/*将导航文字放到页面右侧，记下来即可*/
  display: flex;/*元素变成横向排列*/
}

ul>li{
  line-height: 32px;
  padding: 4px;/*文字字间距*/
  color: white;
}
.content{
  display: flex;
  width: 800px;
  margin-left: auto;
  margin-right: auto;/*内容区居中*/
}

.content>aside{
  background: #000;
  width: 200px;/*左右宽度固定*/
}
.content>main{
  background: #666;
  height: 400px;
  flex-grow: 1;/*中间的宽度根据页面调整大小*/
}
.content>.ad{
  background: #999;
  width: 100px;
}
.imagelist{
  width: 800px;
  margin-left: auto;
  margin-right: auto;/*居中*/
  margin-top: 10px;
}

.imagelist>.x{
  display: flex;/*image元素的父级，使其变横排*/
  flex-wrap: wrap;/*换行*/
  margin-right: -12px;/*负margin，记得去掉border*/
}

.image{
  width: 191px;
  height: 191px;
  background: grey;
  border:1px solid red;
  margin-right: 10px;
  margin-bottom: 10px;
}

		</style>
	</head>
	<body>
		  <header class="header">
		    <div class="logo">
		      <img src="https://img-blog.csdnimg.cn/20210403114706585.jfif?x-oss-process=image/resize,m_fixed,h_224,w_224" alt="">
		    </div>
		    <ul class="clearfix nav">
		      <!--两个名字，css中任意一个选择器均可以使用-->
		      <li>首页</li>
		      <li>课程</li>
		      <li>优惠</li>
		      <li>关于</li>
		    </ul>
 		 </header>
		<div class="content">
		    <aside>一行有六个字</aside>
		    <main></main>
		    <div class="ad"></div>
		</div>
		
		<div class="imagelist ">
		    <div class="x">
		      <div class="image"></div>
		      <div class="image"></div>
		      <div class="image"></div>
		      <div class="image"></div>
		    </div>
  	</div>
	</body>
</html>
